<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_95')}}</h2>
            <div class="personCon">
                <div class="leftpanel">
                    <h2 class="persontitle" v-show="intro.idType==1">{{$t('l.personal_96')}}</h2>
                    <h2 class="persontitle" v-show="intro.idType!==1">{{$t('l.add_154')}}</h2>
                    <div class="resetpsdbar" v-show="!isIdent">
                        <div v-show="country=='cn'">
                            <p class="title">{{$t('l.personal_97')}}</p>
                            <div class="putgroup padbtm">
                                <select class="comput small" v-model="country">
                                    <option v-for="(item,index) in countryList" :key="index" :value="item.code">{{item.name}}</option>
                                </select>
                                <p class="errortext"></p>
                            </div>
                            <p class="title">{{$t('l.personal_57')}}</p>
                            <div class="putgroup padbtm">
                                <input class="comput small" v-model="fullName" :placeholder="$t('l.add_4')">
                                <p class="errortext"></p>
                            </div>
                            <p class="title">{{$t('l.personal_98')}}</p>
                            <div class="putgroup padbtm">
                                <input class="comput small" v-model="idNumber" :placeholder="$t('l.add_4')">
                                <p class="errortext"></p>
                            </div>
                        </div>
                        <div v-show="country!=='cn'">
                            <p class="title">国籍 / Nationality</p>
                            <div class="putgroup">
                                <select class="comput small" v-model="country">
                                    <option v-for="(item,index) in countryList" :key="index" :value="item.code">{{item.name}}</option>
                                </select>
                                <p class="errortext"></p>
                            </div>
                            <p class="title">姓（拼音） / Surname (last name)</p>
                            <div class="putgroup">
                                <input class="comput small" v-model="lastname" :placeholder="$t('l.add_4')">
                                <p class="errortext"></p>
                            </div>
                            <p class="title">名（拼音） / Given name (first and middle name)</p>
                            <div class="putgroup">
                                <input class="comput small" v-model="firstname" :placeholder="$t('l.add_4')">
                                <p class="errortext"></p>
                            </div>
                            <p class="title">证件类型 / Type of identity document</p>
                            <div class="putgroup">
                                <select class="comput small" v-model="idType">
                                    <option value="1" disabled="disabled">{{$t('l.personal_119')}}</option>
                                    <option value="2">{{$t('l.personal_120')}}</option>
                                    <option value="3">{{$t('l.personal_121')}}</option>
                                </select>
                                <p class="errortext"></p>
                            </div>
                            <p class="title">证件号码 / Identification document number</p>
                            <div class="putgroup">
                                <input class="comput small" v-model="idNumber" :placeholder="$t('l.add_4')">
                                <p class="errortext"></p>
                            </div>
                        </div>
                        <a class="btn changebtn" @click="firstIdentity">{{$t('l.personal_186')}}</a>
                    </div>
                    <!--认证成功-->
                    <div class="resetpsdbar" v-show="isIdent && intro.idType!==1">
                        <div class="bindsuc">
                            <img src="../../assets/images/sucico.png">
                            <h2>{{$t('l.add_5')}}！</h2>
                            <p>{{$t('l.personal_113')}}。</p>
                        </div>
                    </div>
                    <div class="resetpsdbar" v-show="isIdent && intro.idType==1">
                        <div class="bindsuc">
                            <img src="../../assets/images/sucico.png">
                            <h2>{{$t('l.add_157')}}！</h2>
                            <router-link class="btn" to="/c2Auth" style="margin:0 auto;">去进行高级认证</router-link>
                        </div>
                    </div>
                </div>
                <div class="rightpanel" v-show="intro.idType==1">
                    <div class="authpabel">
                        <h2>{{$t('l.add_6')}}</h2>
                        <div class="authintro">
                            <div v-if="intro.verifiedLevel==1 || intro.verifiedLevel==2" class="isAuth active"><i></i>{{$t('l.add_10')}}</div>
                            <div v-else class="isAuth" :class="isIdent?'authing':''"><i></i>{{isIdent?$t('l.personal_99'):$t('l.personal_4')}}</div>
                            <p class="permission">- {{$t('l.personal_100')}} -</p>
                            <p class="permission">- {{$t('l.personal_101')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.add_12')}}</h2>
                        <div class="authintro">
                            <div class="isAuth"><i></i>{{$t('l.personal_102')}}</div>
                            <p class="permission">- {{$t('l.personal_103')}}-</p>
                            <p class="permission">- {{$t('l.personal_104')}} -</p>
                            <p class="permission">- {{$t('l.personal_107')}} -</p>
                        </div>
                    </div>
                </div>
                <div class="rightpanel" v-show="intro.idType!==1">
                    <div class="authpabel">
                        <h2>{{$t('l.add_149')}}</h2>
                        <div class="authintro">

                            <div class="isAuth" :class="isIdent?'authing':''"><i></i>{{isIdent?$t('l.personal_99'):$t('l.personal_4')}}</div>
                            <p class="permission">- {{$t('l.personal_100')}} -</p>
                            <p class="permission">- {{$t('l.personal_101')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.add_150')}}</h2>
                        <div class="authintro">
                            <div class="isAuth"><i></i>{{$t('l.add_151')}}</div>
                            <p class="permission">- {{$t('l.personal_103')}}-</p>
                            <p class="permission">- {{$t('l.personal_104')}} -</p>
                        </div>
                    </div>
                    <div class="authpabel">
                        <h2>{{$t('l.personal_105')}}</h2>
                        <div class="authintro">
                            <div class="isAuth"><i></i>{{$t('l.personal_102')}}</div>
                            <p class="permission">- {{$t('l.personal_107')}} -</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
export default {
    components: {
        PersonalHeader,
        PersonalSide
    },
    created(){
        this.intro = this.$store.state.userintro;
        this.verifiedStatus = this.$route.params.status;
        if(this.intro.verifiedStatus==0 && this.intro.verifiedLevel==0){
            this.isIdent = false
        }else if(this.intro.verifiedStatus==3 && this.intro.verifiedLevel==2){
            this.isIdent = true
        }else if(this.intro.verifiedStatus==0 && this.intro.verifiedLevel==1){
            this.isIdent = true
        }else if(this.intro.verifiedStatus==2 && this.intro.verifiedLevel==1){
            this.isIdent = true
        }else if(this.intro.verifiedStatus==1){
            this.isIdent = true
        }
    },
    data(){
        return {
            country:'cn',
            isIdent:false,
            fullName:"",
            idNumber:"",
            idType:2,
            firstname:"",
            lastname:"",
            verifiedStatus:0,
            intro:"",
            countryList:[]
        }
    },
    methods:{
        //c1认证
        async firstIdentity(){
            let that = this;
            let res = await api.firstIdentity({
                country:that.country,
                fullName:that.country=='cn'?that.fullName:that.firstname+that.lastname,
                idNumber:that.idNumber,
                idType:that.idType,
                type:that.country=='cn'?1:2
            })
            if(res.data.code==0){
                that.intro.verifiedStatus = 1;
                localStorage.setItem("userintro",JSON.stringify(this.intro));
                that.$store.commit('changestate');
                that.$router.push({
                    path: "/c2Auth"
                });
            }else if(res.data.code==1040004){
                that.$layer.msg(that.$t('l.add_103'));
            }else if(res.data.code==1040005){
                that.$layer.msg(that.$t('l.add_104'));
            }else if(res.data.code==1040002){
                that.$layer.msg(that.$t('l.add_115'));
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取国家
        async getAreacode(){
            let that = this;
            let res = await api.selectList({
                category:"NATION",
                language:this.$i18n.locale
            })
            if(res.data.code==0){
                that.datalist = [];
                res.data.data.forEach((item,index)=>{
                    that.countryList.push({
                        code:item.value,
                        name:item.name
                    });
                })
            }
        },
    },
    mounted(){
       this.getAreacode();
    }
}
</script>
<style lang="less">
.personalHome {
  padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .rightpanel{
        .authpabel{
            border-radius:9px;
            border:1px solid rgba(233,238,244,1);
            overflow:hidden;
            margin-top:-10px;
            &:first-child{
                margin-top:0;
            }
            &:last-child{
                .authintro{
                    height:200px;
                    .permission{
                        margin-top:10px;
                    }
                }
            }
            h2{
                height:50px;
                background:rgba(249,249,255,1);
                border-bottom:1px solid rgba(233,238,244,1);
                line-height:50px;
                text-align:center;
                font-size:16px;
                font-familyA:"PingFangSC-Medium";
                font-weight:500;
                color:rgba(51,56,94,1);
            }
            .authintro{
                padding-top:16px;
                height:185px;
                box-sizing: border-box;
                text-align:center;
                .isAuth{
                    height:34px;
                    padding:0 12px 0 18px;
                    text-align:center;
                    background:rgba(243,245,255,1);
                    border-radius:4px;
                    border:1px solid #2D8DFE;
                    font-size:14px;
                    font-weight:400;
                    color:#2D8DFE;
                    line-height:34px;
                    display:inline-block;
                    margin-bottom:15px;
                    i{
                        display:inline-block;
                        vertical-align:middle;
                        width:16px;
                        height:19px;
                        margin-right:10px;
                        background:url(../../assets/images/authFalse.png) no-repeat center;
                    }
                    &.active{
                        background:rgba(246,255,237,1);
                        border:1px solid rgba(183,235,143,1);
                        color:#52C41A;
                        i{
                            background:url(../../assets/images/authTrue.png) no-repeat center;
                        }
                    }
                    &.authing{
                        background:rgba(255,251,230,1);
                        border:1px solid rgba(255,229,143,1);
                        color:#F78900;
                        i{
                            background:url(../../assets/images/authing.png) no-repeat center;
                        }
                    }
                }
                p{
                    font-size:14px;
                    font-weight:400;
                    color:rgba(51,56,94,1);
                    line-height:20px;
                    text-align:center;
                    padding-bottom:9px;
                }
            }
        }
    }
    .leftpanel{
        .resetpsdbar{
            width:518px;
            margin:58px auto;
            .title{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:5px;
            }
            .padbtm{
                padding-bottom:20px;
            }
            .changebtn{
                width:100%;
                height:40px;
                margin-top:50px;
                line-height:40px;
            }
        }
    }
}
</style>
